<!DOCTYPE html>
<html lang="zh-cn">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<title>产品1</title>

	<link href="__ROOT__/static/css/bootstrap.min.css" rel="stylesheet" />
	<style>
		.caidan a:link {
			color: gray;
			text-decoration: none
		}

		/* 未访问链接 */

		.caidan a:visited {
			color: blue;
			text-decoration: none
		}

		/* 已访问链接 */

		.caidan a:hover {
			color: blue;
			text-decoration: none
		}

		/* 用户鼠标悬停 */

		.caidan a:active {
			color: blue;
			text-decoration: none
		}

		/* 激活链接 */
	</style>

</head>

<body>

	<div class="container-fluid ">


		<!--标签工具 开始-->
		<div class="nav nav-tabs">
			<!--按钮块  按钮是 48*48 开始-->
			<div class=" active col-xs-4 caidan text-center ">
				<a href="#name1" data-toggle="tab">
					<img src="__ROOT__/static/note/img/5.jpg" alt="" class='img-responsive center-block' /> 管道探测

				</a>
			</div>
			<div class="col-xs-4 caidan text-center ">
				<a href="#name2" data-toggle="tab">
					<img src="__ROOT__/static/note/img/5.jpg" alt="" class='img-responsive center-block' /> 美国TR
				</a>
			</div>
			<div class="col-xs-4 caidan text-center ">
				<a href="#name3" data-toggle="tab">
					<img src="__ROOT__/static/note/img/5.jpg" alt="" class='img-responsive center-block' /> FLUKE
				</a>
			</div>
			<div class="col-xs-4 caidan text-center ">
				<a href="#name4" data-toggle="tab">
					<img src="__ROOT__/static/note/img/5.jpg" alt="" class='img-responsive center-block' /> 其他仪器
				</a>
			</div>
			<div class="col-xs-4 caidan text-center">
				<a href="#name5" data-toggle="tab">
					<img src="__ROOT__/static/note/img/5.jpg" alt="" class='img-responsive center-block' /> 燃气泄漏
				</a>
			</div>
			<div class="col-xs-4 caidan text-center">
				<a href="#name6" data-toggle="tab">
					<img src="__ROOT__/static/note/img/5.jpg" alt="" class='img-responsive center-block' /> 抢险抢修
				</a>
			</div>


			<!--按钮快 结束-->
		</div>
	</div>
	<!--标签工具 结束-->
	</div>
	在手机屏幕下a 链接最有效
	<pre>
		
.caidan a:link{ color:gray;text-decoration:none}  /* 未访问链接 */
.caidan a:visited{ color:blue;text-decoration:none}  /* 已访问链接 */
.caidan a:hover{ color:blue;text-decoration:none}   /* 用户鼠标悬停 */
.caidan a:active{ color:blue;text-decoration:none}   /* 激活链接 */
			

</pre> 九宫格菜单 csidan 是a标签的样式 text-center 文字居中 center-block 图片居中
	<pre>
&lt;div class="col-xs-4 caidan text-center "&gt;
&lt;a href="#name1"&gt;
&lt;img src="__ROOT__/static/note/img/5.jpg" alt="" class='img-responsive center-block' /&gt; 管道探测
&lt;/a&gt;
 &lt;/div&gt;

</pre>

	<!--公共js区-->
	<script src="__ROOT__/static/js/jquery.min.js"></script>
	<script src="__ROOT__/static/js/bootstrap.min.js"></script>
</body>

</html>